<template>
    <div class="look" @click="foo($event)">
        <header>
            <a @click="fanhui" :to="{path:'/listNR', query:{caricatureId:caricatureId} }">></a>
            <span>{{bookname}}</span> <span>{{hua}}话</span>
            <router-link :to="{path:'/listNR', query:{caricatureId:caricatureId} }">详情</router-link>
        </header>
        <div class="nr" id="nr" v-if="is">
            <img :src="p.url" v-for="p in dataStr" :key="p.id">
            <div class="last"></div>
        </div>
        <footer v-if="is">
            <span class="jd"> {{sum}} / {{dataStr.length}}</span>
            <span class="hua">第{{hua}}话</span>
        </footer>
        <div class="my" v-if="!is">广告</div>
    </div>
</template>

<script>
const axios = require('axios');
const Qs = require('qs')
export default {
    name: 'look',
    data() {
        return {
            hua: this.$route.query.hua,
            caricatureId: this.$route.query.caricatureId,
            dataStr: '',
            is: false,
            index: true,
            sum: 1,
            is: true,
            bookname: this.$route.query.name
        }
    },
    watch: {
        hua() {
            this.getNR()
        }
    },
    methods: {
        foo(e) {
            let el = e.target.parentNode.parentNode
            el = el.querySelector('header')
            if (this.index) {
                this.index = false
                el.style['height'] = '12.8vw'
            } else {
                this.index = true
                el.style['height'] = '0px'
            }
        },
        getNR() {
            let data = {
                caricatureId: this.caricatureId,
                hua: this.hua
            }
            axios({
                method: 'post',
                url: `http://127.0.0.1:80/nr/manhua`,
                data: Qs.stringify(data)
            })
                .then((data) => {
                    this.dataStr = data.data
                    if (this.dataStr.status == 1) {
                        this.is = false
                    } else {
                        this.is = true
                    }
                }).catch((err) => {
                    console.log(err);
                })
        },
        handleScroll() {
            let top = document.querySelector('#nr').scrollTop
            this.sum = Math.floor(top / 600) + 1
            if (this.sum >= this.dataStr.length) {
                setTimeout(() => {
                    let hua = this.hua - 0
                    localStorage.setItem("caricatureId", this.caricatureId, 100);
                    localStorage.setItem("hua", hua + 1, 100);
                    location.reload();
                }, 500)
            }
        },
        fanhui() {
            localStorage.removeItem('caricatureId')
            localStorage.removeItem('hua')
            window.location.href = `/#/listNR?caricatureId=${this.caricatureId}`
        }
    },
    mounted() {
        document.querySelector('#nr').addEventListener('scroll', this.handleScroll, true)
        this.getNR()
        let val = localStorage.getItem("caricatureId")
        let hua = localStorage.getItem("hua")
        if (val != undefined && hua != undefined) {
            this.caricatureId = val
            this.hua = hua
        }
    }
}
</script>
<style lang="less" scoped>
html,
body,
#app,
.look {
    position: relative;
    top: -12.5333vw;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 99999999;
    overflow-y: auto;

    header {
        width: 100%;
        height: 0;
        position: fixed;
        top: 0;
        background-color: #1e212c;
        color: white;
        display: flex;
        align-items: center;
        padding-left: 5.3333vw;
        overflow: hidden;
        transition: height .3s;

        span:nth-of-type(1) {
            max-width: 49.0667vw;
            font-size: 6.6667vw;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        span:nth-of-type(2) {
            font-size: 3.4667vw;
            margin-left: 2.6667vw;
            margin-right: 5.3333vw;
        }

        a:nth-of-type(1) {
            transform: rotate(180deg);
            margin-right: 2.6667vw;
            font-size: 6.6667vw;
            color: white;
        }

        a:nth-of-type(2) {
            position: absolute;
            right: 9.3333vw;
            color: #f97399;
            border: .2667vw #f97399 solid;
            width: 14.1333vw;
            height: 6.4vw;
            line-height: 6.4vw;
            text-align: center;
            border-radius: 1.3333vw;
        }
    }

    .nr {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        img {
            width: 100%;
            height: auto;
        }

        .last {
            height: 53.3333vw;
        }
    }

    footer {
        position: fixed;
        bottom: 0;
        right: 0;
        color: white;

        .hua {
            margin-left: 1.3333vw;
            margin-right: 1.3333vw;
        }
    }

    .my {
        width: 100%;
        color: white;
        font-size: 80vw;
        text-align: center;
    }
}
</style>